import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_tencentplayer/flutter_tencentplayer.dart';
import 'package:moonplay/pages/tencentplayer/tencent_player_linear_progress_indicator.dart';
import 'package:moonplay/pages/tencentplayer/triangle_painter.dart';
import 'package:moonplay/pages/tencentplayer/util/common_util.dart';
import 'package:moonplay/pages/tencentplayer/util/time_util.dart';
import 'package:moonplay/pages/tencentplayer/util/widget_util.dart';

const List<double> rateList = [1.0, 1.2, 1.5, 2.0];

class TencentPlayerBottomFullWidget extends StatefulWidget {
  final isShow;
  final TencentPlayerController controller;
  final VoidCallback behavingCallBack;
  final ValueChanged<int> changeClear;

  final VoidCallback fullCallBack;
  final VoidCallback fullCallNext;

  // UI
  final bool showClearBtn;

  TencentPlayerBottomFullWidget({this.isShow, this.controller, this.behavingCallBack, this.changeClear, this.showClearBtn, this.fullCallBack, this.fullCallNext});

  @override
  _TencentPlayerBottomFullWidgetState createState() => _TencentPlayerBottomFullWidgetState();
}

class _TencentPlayerBottomFullWidgetState extends State<TencentPlayerBottomFullWidget> {
  TencentPlayerController get controller => widget.controller;

  int currentClearIndex = 0;
  bool isShowClearList = false;
  bool isShowRateList = false;

  List<String> transcodeList = ['标清', '高清', '超清'];

  static double bottomContainerH = 90;
  static double bottomHeight = 40;
  static double progressHeight = 24;
  static double loadingImgW = 53;
  static double iconPlayW = 24;
  static double clearListContainerW = 65;
  static double clearItemContainerH = 36;
  static double clearItemContainerBottom = 36;

  Duration seekPos;



  @override
  void didUpdateWidget(TencentPlayerBottomFullWidget oldWidget) {
    if (oldWidget.isShow == true && widget.isShow == false) {
      setState(() {
        isShowClearList = false;
        isShowRateList = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Offstage(
      offstage: !widget.isShow,
      child: Stack(
        overflow: Overflow.visible,
        children: <Widget>[
          Positioned(
            left: 0,
            right: 0,
            bottom: bottomHeight,
            child: Container(
              height: progressHeight,
              child: BottomScrubber(
                behavingCallBack: () {
                  widget.behavingCallBack?.call();
                },
                controller: controller,
              ),
            )
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: Container(
              height: bottomHeight,
              child: bottomWidget(),
            )
          ),
          Container(),
          // Align(
          //   alignment: Alignment.bottomLeft,
          //   child: Container(
          //     width: double.infinity,
          //     height: bottomContainerH,
          //     color: Colors.red[200],
          //     child: Row(
          //       crossAxisAlignment: CrossAxisAlignment.center,
          //       children: <Widget>[
          //         /// 播放暂停按键
          //         // GestureDetector(
          //         //   behavior: HitTestBehavior.opaque,
          //         //   onTap: () {
          //         //     if (controller.value.isPlaying) {
          //         //       controller.pause();
          //         //     } else {
          //         //       controller.play();
          //         //     }
          //         //     widget.behavingCallBack?.call();
          //         //   },
          //         //   child: Container(
          //         //     height: _Style.bottomContainerH,
          //         //     padding: EdgeInsets.all(15.0),
          //         //     child: Image.asset(controller.value.isPlaying ? 'static/player_pause.png' : 'static/player_play.png', width: _Style.iconPlayW, height: _Style.iconPlayW,),
          //         //   ),
          //         // ),
          //         /// 进度条
          //         Expanded(
          //           child: BottomScrubber(
          //             behavingCallBack: () {
          //               widget.behavingCallBack?.call();
          //             },
          //             controller: controller,
          //           ),
          //         ),
          //         // widget.showClearBtn ? GestureDetector(
          //         //   behavior: HitTestBehavior.opaque,
          //         //   onTap: () {
          //         //     setState(() {
          //         //       isShowClearList = !isShowClearList;
          //         //     });
          //         //     widget.behavingCallBack?.call();
          //         //   },
          //         //   child: Container(
          //         //     height: _Style.bottomContainerH,
          //         //     alignment: Alignment.center,
          //         //     padding: EdgeInsets.only(
          //         //       left: 15,
          //         //     ),
          //         //     child: Text(transcodeList[currentClearIndex], style: TextStyle(color: Colors.white, fontSize: 12,), textAlign: TextAlign.center,)
          //         //   ),
          //         // ) : SizedBox(),
          //         // GestureDetector(
          //         //   behavior: HitTestBehavior.opaque,
          //         //   onTap: () {
          //         //     setState(() {
          //         //       isShowRateList = !isShowRateList;
          //         //     });
          //         //     widget.behavingCallBack?.call();
          //         //   },
          //         //   child: Container(
          //         //     height: _Style.bottomContainerH,
          //         //     alignment: Alignment.center,
          //         //     padding: EdgeInsets.only(
          //         //       left: 15,
          //         //       right: 20
          //         //     ),
          //         //     child: Text('倍速${controller.value.rate}x', style: TextStyle(color: Colors.white, fontSize: 12,),),
          //         //   ),
          //         // ),
          //         GestureDetector(
          //           behavior: HitTestBehavior.opaque,
          //           onTap: (){
          //             widget.fullCallBack?.call();
          //           },
          //           child: Container(
          //             width: 50,
          //             height: bottomContainerH,
          //             color: Colors.blue,
          //             child: Icon(IconData(0xe660, fontFamily: Constants.IconFontFamily),color: Colors.white ,size: 22),
          //           ),
          //         )
          //       ],
          //     ),
          //   ),
          // ),
          /// 清晰度选择框
          isShowClearList ? Positioned(
            right: 60,
            bottom: clearItemContainerBottom,
            child: Column(
              children: <Widget>[
                Container(
                  width: clearListContainerW,
                  padding: EdgeInsets.only(bottom: 5, left: 5, right: 5),
                  decoration: BoxDecoration(
                    color: Color(0x7f000000),
                    borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: transcodeList.map((String transcode) {
                      int index = transcodeList.indexOf(transcode);
                      bool isLastOne = index == transcodeList.length - 1;
                      return GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          currentClearIndex = index;
                          isShowClearList = false;
                          widget.changeClear?.call(currentClearIndex);
                          widget.behavingCallBack?.call();
                          setState(() {});
                        },
                        child: Container(
                          alignment: Alignment.center,
                          height: clearItemContainerH,
                          decoration: BoxDecoration(
                              border: isLastOne ? null : Border(bottom: BorderSide(width: 0.3, color: Color(0xffeeeeee)))
                          ),
                          child: Text(transcode, style: currentClearIndex == index ? TextStyle(color: Color(0xfff24724), fontSize: 12,) : TextStyle(color: Colors.white, fontSize: 12,),),
                        ),
                      );
                    }).toList(),
                  ),
                ),
                Container(
                  width: 12,
                  height: 6,
                  child: CustomPaint(
                    painter: TrianglePainter(context),
                  ),
                ),
              ],
            ),
          ) : SizedBox(),
          /// 播放速度选择框
          isShowRateList && widget.isShow ? Positioned(
            right: 20,
            bottom: clearItemContainerBottom,
            child: Column(
              children: <Widget>[
                Container(
                  width: clearListContainerW,
                  padding: EdgeInsets.only(bottom: 10, left: 5, right: 5),
                  decoration: BoxDecoration(
                    color: Color(0x7f000000),
                    borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: rateList.map((double rate) {
                      return GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          isShowRateList = false;
                          controller.setRate(rate);
                          widget.behavingCallBack?.call();
                          setState(() {
                          });
                        },
                        child: Container(
                          alignment: Alignment.center,
                          height: clearItemContainerH,
                          decoration: BoxDecoration(
                              border: rate == rateList[rateList.length - 1] ? null : Border(bottom: BorderSide(width: 0.3, color: Color(0xffeeeeee)))
                          ),
                          child: Text('$rate倍', style: controller.value.rate == rate ? TextStyle(color: Color(0xfff24724), fontSize: 12,) : TextStyle(color: Colors.white, fontSize: 12,),),
                        ),
                      );
                    }).toList(),
                  ),
                ),
                Container(
                  width: 12,
                  height: 6,
                  child: CustomPaint(
                    painter: TrianglePainter(context),
                  ),
                ),
              ],
            ),
          ) : SizedBox()
        ],
      ),
    );
  }

  // void seekToRelativePosition(Offset globalPosition) {
  //   double width = WidgetUtil.findGlobalRect(currentKey).width;
  //   double xOffSet = WidgetUtil.globalOffsetToLocal(currentKey, globalPosition).dx;
  //   final double relative = xOffSet / width;
  //   seekPos = controller.value.duration * relative;
  //   setState(() {
  //   });
  //   /// 回调正在交互，用来做延迟隐藏cover
  //   CommonUtils.throttle(() {
  //     widget.behavingCallBack?.call();
  //   });
  // }

  Widget bottomWidget(){
    Duration showDuration = seekPos != null ? seekPos : controller.value.position;
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Row(
          children: [
            SizedBox(width: 10,),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: (){
                if (controller.value.isPlaying) {
                  controller.pause();
                } else {
                  controller.play();
                }
              },
              child: Container(
                width: 40,
                height: bottomHeight,
                child: Icon(IconData(controller.value.isPlaying ? 0xe98f : 0xe98c, fontFamily: Constants.IconFontFamily),color: Colors.white ,size: 36),
              ),
            ),
            // GestureDetector(
            //   behavior: HitTestBehavior.opaque,
            //   onTap: (){
            //     print("下一集");
            //     widget.fullCallNext();
            //   },
            //   child: Container(
            //     width: 40,
            //     height: bottomHeight,
            //     child: Icon(IconData(0xe99c, fontFamily: Constants.IconFontFamily),color: Colors.white ,size: 34),
            //   ),
            // ),
            SizedBox(width: 10,),
            Container(
              height: bottomHeight,
              alignment: Alignment.centerLeft,
              child: Text(TimeUtil.formatDuration(showDuration) + "/" + TimeUtil.formatDuration(controller.value.duration), style: TextStyle(color: Colors.white, fontSize: 16),),
            )
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: (){
                SystemChrome.setPreferredOrientations([
                  DeviceOrientation.portraitUp,
                ]);
                Navigator.pop(context, controller);
              },
              child: Container(
                width: 50,
                height: bottomHeight,
                child: Icon(IconData(0xe956, fontFamily: Constants.IconFontFamily),color: Colors.white ,size: 26),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

class BottomScrubber extends StatefulWidget {
  final TencentPlayerController controller;
  final VoidCallback behavingCallBack; //正在交互

  BottomScrubber({
    @required this.controller,
    this.behavingCallBack,
  });

  @override
  _BottomScrubberState createState() => _BottomScrubberState();
}

class _BottomScrubberState extends State<BottomScrubber> {
  GlobalKey currentKey = GlobalKey();
  bool _controllerWasPlaying = false;

  TencentPlayerController get controller => widget.controller;

  Duration seekPos;

  static double bottomContainerH = 100;
  static double progressHeight = 24;
  static double loadingImgW = 53;
  static double iconPlayW = 24;
  static double clearListContainerW = 65;
  static double clearItemContainerH = 36;
  static double clearItemContainerBottom = 36;

  void seekToRelativePosition(Offset globalPosition) {
    double width = WidgetUtil.findGlobalRect(currentKey).width;
    double xOffSet = WidgetUtil.globalOffsetToLocal(currentKey, globalPosition).dx;
    final double relative = xOffSet / width;
    seekPos = controller.value.duration * relative;
    setState(() {
    });
    /// 回调正在交互，用来做延迟隐藏cover
    CommonUtils.throttle(() {
      widget.behavingCallBack?.call();
    });
  }
  @override
  Widget build(BuildContext context) {
    Duration showDuration = seekPos != null ? seekPos : controller.value.position;

    return Row(
      children: <Widget>[
        // Container(
        //   constraints: BoxConstraints(
        //       minWidth: 60
        //   ),
        //   height: bottomContainerH,
        //   alignment: Alignment.centerLeft,
        //   padding: EdgeInsets.only(left: 10),
        //   child: Text(TimeUtil.formatDuration(showDuration), style: TextStyle(color: Colors.white, fontSize: 12,),),
        // ),
        Expanded(
          child: GestureDetector(
            key: currentKey,
            behavior: HitTestBehavior.opaque,
            child: Container(
              height: bottomContainerH,
              padding: EdgeInsets.symmetric(vertical: progressHeight / 2 - 1.5),
              child: Container(
                height: 2,
                child: Stack(
                  fit: StackFit.passthrough,
                  children: <Widget>[
                    LinearProgressIndicator(
                      value: controller.value.duration.inMilliseconds <= 0 ? 0 : controller.value.playable.inMilliseconds / controller.value.duration.inMilliseconds,
                      valueColor: AlwaysStoppedAnimation<Color>(Color(0xccffffff)),
                      backgroundColor: Color(0x33ffffff),
                    ),
                    TencentLinearProgressIndicator(
                      value: controller.value.duration.inMilliseconds <= 0 ? 0 : showDuration.inMilliseconds / controller.value.duration.inMilliseconds,
                      valueColor: AlwaysStoppedAnimation<Color>(Color(0xfffe373c)),
                      backgroundColor: Colors.transparent,
                    ),
                  ],
                ),
              ),
            ),
            onHorizontalDragStart: (DragStartDetails details) {
              if (!controller.value.initialized) {
                return;
              }
              _controllerWasPlaying = controller.value.isPlaying;
              if (_controllerWasPlaying) {
                controller.pause();
              }
            },
            onHorizontalDragUpdate: (DragUpdateDetails details) {
              if (!controller.value.initialized) {
                return;
              }
              seekToRelativePosition(details.globalPosition);
            },
            onHorizontalDragEnd: (DragEndDetails details) async {
              await controller.seekTo(seekPos);
              seekPos = null;
              setState(() {
              });
              if (_controllerWasPlaying) {
                controller.play();
              }
            },
            onTapDown: (TapDownDetails details) async {
              if (!controller.value.initialized) {
                return;
              }
              seekToRelativePosition(details.globalPosition);
              await controller.seekTo(seekPos);
              seekPos = null;
              setState(() {
              });
            },
          ),
        ),
        // Container(
        //   constraints: BoxConstraints(
        //       minWidth: 60
        //   ),
        //   height: bottomContainerH,
        //   alignment: Alignment.center,
        //   child: Text(TimeUtil.formatDuration(controller.value.duration), style: TextStyle(color: Colors.white, fontSize: 12,),),
        // ),
      ],
    );
  }
}



///设置iconfont
class Constants {
  static const IconFontFamily = 'appIconFont';
}